import React, { Component } from 'react';
import { LeftOutlined } from '@ant-design/icons'
import { good_favlist, good_unfav } from '../utils/api'
import { connect } from 'react-redux'
import { create_request_fav } from '../store/actionCreators/index'
import './favlist.scss'
class Favlist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            favlist: [],
            sales: []
        }
    }
    componentDidMount() {
        good_favlist({ userid: localStorage.getItem("userid") }).then((res) => {
            console.log(res.data.list)
            this.setState({
                favlist: res.data.list,
                sales: res.data.list.salesPrice
            })
        })
    }
    goshop = () => {
        this.props.history.push('/index/cate')
    }
    render() {
        return (
            <div className='shou'>
                <div className="fav_m">
                    <div className="title_r">
                        <LeftOutlined onClick={this.back} />
                        <h1>我的收藏</h1>
                        <span>......</span>
                    </div>
                </div>
                <div className="fav">
                    {
                        this.state.favlist.length == 0 ?
                            <div className='cang'>
                                <p >还没有收藏商品，<span onClick={this.goshop} style={{ color: 'red' }}>去逛逛</span></p>
                            </div> :
                            <div>
                                {
                                    this.state.favlist.map((item, index) => {
                                        return (
                                            // 当收藏列表中有数据，通过数据进行渲染收藏页面（还未完善）
                                            <div key={index} className='canggoods' >
                                                <div className="goodpic" onClick={() => this.gogood(item.id)}>
                                                    <img src={item.pic} alt="" />
                                                </div>
                                                <div className="goodtext">
                                                    <p className='goodname'>{item.name}</p>
                                                    <div className="quxiao">
                                                        <p>{item.salesPrice.name}￥<span className='price_s'>{item.salesPrice.value}</span></p>
                                                        <span className="anniu" onClick={() => this.unfav(item)}>取消收藏</span>
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                    }
                    {/* {message} */}
                </div>
            </div>
        );
    }
    back = () => {
        this.props.history.go(-1)
    }
    unfav = (item) => {
        var user = localStorage.getItem("userid")
        good_unfav({ userid: user, goodid: item.id }).then((res) => {
            console.log(res.data)
            good_favlist({ userid: localStorage.getItem("userid") }).then((res) => {
                console.log(res.data.list)
                this.setState({
                    favlist: res.data.list,
                    sales: res.data.list.salesPrice
                })
            })
        })
        this.props.fav_request(item.id)
    }
    gogood(id) {
        this.props.history.push({ pathname: '/goods', state: { goodid: id } })
    }
}

export default connect(
    (state) => {
        return {
            count: state.fav
        }
    },
    (dispatch) => {
        return {
            fav_request: function (payload) {
                dispatch(create_request_fav(payload))
            }
        }
    }
)(Favlist)